<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content {
            /* 不显示，但仍然占据文档流 */
            /* visibility: hidden; */
            /* display:none; 让元素脱离文档流 */
             /* position:absolute;  脱离文档流 
            left:-999px; */
            /* display: inline-block;
            /* translate 相对于元素本身 */
            /* transform: translate(-100%);  占位 */ 
            /* display: inline-block;
             transform: scale(0,0);   占位 
            width:200px;
            height:200px;
            background-color: green; */
            /* opacity:0; */
            /* 离开文档流
            float:left; */
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="ep1">
            <span id="content">彪悍的人生不需要解释</span>
            <input type="text" id="input" value="彪悍的人生不需要解释"/>
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="Cancel">
        </div>
    </div>
    <script>
        // js基于原型式面向对象
        function EditInPlace(){
            // 好处：把DOM元素作为属性
            this.content = document.getElementById('content');
            this.save = document.getElementById('save');
            this.input = document.getElementById('input');
            this.cancel = document.getElementById('cancel');

            this.bindEvents();
        }
        EditInPlace.prototype = {
            // 罗列方法
            convertToText() {
                this.content.style.display='inline';
                this.save.style.display='none';
                this.cancel.style.display='none';
                this.input.style.display='none';
            },
            convertToEdit(){
                this.content.style.display='none';
                this.save.style.display='inline';
                this.cancel.style.display='inline';
                this.input.style.display='inline';
            },
            bindEvents() {
                // let that = this; //作用域链
                // 函数是一个事件的回调函数 this 指向事件元素
                // 箭头函数 没有this , this指向外层
                this.content.addEventListener('dblclick',() =>{
                    // this丢失 ，被覆盖 指向事件 不指向当前对象
                    // console.log(this);
                    // that.convertToEdit();
                    this.convertToEdit();
                    input.focus();
                })
                this.save.addEventListener('click',()=>{
                    // 拿到当前的值，并动态设置span
                    const val = input.value;
                    this.content.innerText = val;
                    this.convertToText();
                })
                this.cancel.addEventListener('click',()=>{
                    this.convertToText();
                })
            }
        }

        window.onload = function () {
            let aditor = new EditInPlace();
            aditor.convertToText();
        }


        // js 切换来显示
        // const save = document.getElementById('save');
        // const cancel = document.getElementById('cancel');
        // const input = document.getElementById('input');
        // const content = document.getElementById('content');
        // // DOM 动态样式

        // //函数式编程 组织代码
        // // 功能复杂，流程式的代码不符合
        // // 函数封装，被执行，可复用性
        // function convertToText() {
        //     content.style.display='inline';
        //     save.style.display='none';
        //     cancel.style.display='none';
        //     input.style.display='none';
        // }
        // convertToText();

        // function convertToEdit(){
        //     content.style.display='none';
        //     save.style.display='inline';
        //     cancel.style.display='inline';
        //     input.style.display='inline';
        // }

        // content.addEventListener('dblclick',function(){
        //     convertToEdit();
        //     input.focus();
        // })

        // save.addEventListener('click',function(){
        //     // 拿到当前的值，并动态设置span
        //     const val = input.value;
        //     content.innerText = val;
        //     convertToText();
        // })

        // cancel.addEventListener('click',function(){
        //     convertToText();
        // })

        // setTimeout(()=>{
        //     content.style.display='none';
        //     save.style.display='inline';
        //     cancel.style.display='inline';
        //     input.style.display='inline';
        // },3000)
    </script>
</body>
</html>